<script setup lang="ts">
import {onMounted, ref} from "vue";
import TopView from "@/components/search/TopView.vue";
import HeaderArea from "@/components/search/HeaderArea.vue";
import {
    addPoints,
    exchangeList,
    integral,
    minilist, search,
    secJi,
    shopcheck,
    shopcheck_0, shopId,
    shopList,
    shopSort,
    signIn
} from "@/api/home";
import ShopSearch from "@/views/homePage/components/shopSearch.vue";
import {showConfirmDialog, showToast} from "vant";
import {getPoints} from "@/stores/pointMall";



const activeName = ref('a');
let shopLists =ref()
shoplistreq()
// 前面全部的
function shoplistreq() {
    shopList().then(res=>{
        // console.log(res)
        shopLists.value =res.rows.map(item=> {
            item.goodsImage = 'http://192.168.5.120:8199' + item.goodsImage
            return item
        })

    })
}

const shopLists_0= ref()
shopcheck_0().then(res=>{
    // console.log(res.rows)
    shopLists_0.value =res.rows.map(item=> {
        item.goodsImage = 'http://192.168.5.120:8199' + item.goodsImage
        return item
    })
})
//1 冀商好物
const shoplist_2 =ref()
gethaolist()
function gethaolist() {
    shopcheck().then(res=> {
        // console.log(res)
        shoplist_2.value = res.rows.map(item=> {
            item.goodsImage = 'http://192.168.5.120:8199' + item.goodsImage
            return item
        })
        // console.log(res.rows)
    })
}

const sortList_2 = ref()
shopSort().then(res=>{
    // console.log(res)
    // console.log(res.data)
    sortList_2.value = res.data
})

// app的冀商商品秒杀 有问题 报错
// secJi(shopId).then(res=>{
//     console.log(res)
// })

addPoints().then(res=>{
    // console.log(res)
})
//  交换记录  成功 没数据
// exchangeList().then(res=>{
//     console.log(res)
// })
// 积分信息  成功
const integralNumber = ref()
function pointsMsg() {
    integral().then(res=>{
        // console.log(res)
        // console.log(res.data.integralNumber)
        integralNumber.value = res.data.integralNumber
    })
}
pointsMsg()
// 今天签到过了
// signIn().then(res=>{
//     console.log(res)
// })
//
minilist().then(res=>{
    // console.log(res)
})
// 根据ID查寻积分商城商品
// shopId(item).then(res=>{
//     console.log(res)
// })



//pinia
const goods=getPoints()
// console.log(goods.good.goodsId,22)
// 马上抢 信息


// 把当前对象存到pinia中
const show = ref(false);
const showPopup = (item) => {
    show.value = true;
    goods.good=item; //当前对象存进pinia
};
const flag =  ref(true)
const msg = ref()

onMounted(()=> {
    gobuy
    // const createDiv = () => {
    //     return h('van-cell', { @click="showPopup2(item)" }, );
    // };
    //
    // return () => createDiv();
    // const onConfirm = (item) => {
    //     // console.log('确认操作被触发'); //item = goods
    //     gobuy(item)
    //
    //     // console.log(item)
    // };
})

// 消息确认

const onConfirm = (item) => {
    // console.log('确认操作被触发'); //item = goods
    gobuy(item)
    // console.log(item)
};
const quantity = ref()
function gobuy(item) {
    flag.value = false
    // console.log(item)
    let obj = {
        shopId:item.good.goodsId
    }
    secJi(obj).then(res=>{
        // console.log(res.msg)
        // console.log(3333)
        // if (res.msg!= '') {     //
        //     console.log(444444)// 首先不为空 兑换   弹出兑换码
            // console.log(item.good.goodsId+res.msg)
            //     重新执行请求 再次渲染
            if (res.msg=='已达最大兑换次数') {         //  1、达到最大兑换次数 超出码    goodsExchangeFrequency最大兑换  goodsMargin  总数-剩余  大于 最大
                msg.value = res.msg
                console.log('最大兑换--' +msg.value)
                // console.log('最大')
                //     调用另外一个 到达最大的提示框
            } else {                                    //  /2、兑换码  弹出兑换码
                flag.value =false
                msg.value = res.msg
                console.log(msg.value)
                shoplistreq()
                pointsMsg()
                showConfirmDialog({
                    title: '兑换码',
                    message:
                        `dsMRoKAO`,
                })
                    .then(() => {
                        // on confirm
                    })
                    .catch(() => {
                        // on cancel
                    });
            }

    })
}

let shuruzhi = ref<any>("")
function  sear() {
    console.log(shuruzhi.value)
    search(shuruzhi.value).then(res=>{  //item.goodsName   goods   @click fangfa   chuan input值

        shopLists.value =res.rows.map(item=> {
            item.goodsImage = 'http://192.168.5.120:8199' + item.goodsImage
            return item
        })

    })
    search(shuruzhi.value).then(res=> {
        shoplist_2.value = res.rows.map(item=> {
            item.goodsImage = 'http://192.168.5.120:8199' + item.goodsImage
            return item
        })
    })
//

}


</script>

<template>


    <van-dialog v-model:show="show2" title="兑换码" show-cancel-button confirmButtonColor="red"
                v-if="flag">
        <div class="prompt">  1{{msg}}</div>
    </van-dialog>
<!--    <top-view>积分商城</top-view>-->
    <header-area>积分商城</header-area>
    <div class="topsearchBox">
        <div class="topsearch">
            <div class="searchImg">
                <img src="./images/搜素.png" alt="">
            </div>
            <input type="text" v-model="shuruzhi" class="inputBox" placeholder="请输入商品名称">
            <button @click="sear" class="btnBox">搜索</button>
        </div>

    </div>
<!--    <shop-search></shop-search>-->
  <div class="topPoints">
      <div class="search"></div>
      <div class="pointBox">
          <div class="pointBoxContent">
              <div class="points">{{integralNumber}}</div>
              <div class="pointsText">我的积分</div>
              <div class="collectPoint">攒积分 换商品</div>
              <div class="exchangeText">用所得积分,可兑换下列商品</div>
          </div>
      </div>

  </div>


  <div class="bottomTab">
      <div class="tabBox">
          <van-tabs v-model:active="activeName"  background="#F8F8F8" shrink color="red" >
              <van-tab title="全部" name="a">
                  <div class="tabList" v-for="item in shopLists" :key="item.goodsId">

                      <div class="imgBox"  v-if="item.goodsNumber==0">
                          <div class="image-container">
                              <img :src="item.goodsImage" alt="" class="bottomimg">
                              <img src="./images/shopedno.png" alt="" class="topimg">
                          </div>

                      </div>
                      <div class="imgBox" v-else>
                          <img :src="item.goodsImage" alt="">
                      </div>
                      <div class="contentBox">
                          <div class="listTitle">{{item.goodsName}}</div>
                          <div class="listPrice">价值{{item.goodsValue}}元</div>

                          <div class="listPoints">
                              <div class="listDetail">
                                  <span>
                                      <span class="redPrice">{{item.goodsIntegral}}</span>
                                      积分
                                  </span>
                                  <span class="redText">仅剩{{item.goodsMargin}}件</span>
                                  <div class="lineBox">
                                      <div class="redline">
                                      </div>
                                  </div>
                              </div>
                              <div>
                                  <div class="nopointBox" v-if="item.goodsMargin!=0">
                                      <van-cell   @click="showPopup(item)" >
                                          <img src="./images/goshop.png" alt="" >
                                      </van-cell>
                                  </div>
                                  <div class="nopointBox" v-else>
                                      <img src="./images/goshopno.png" alt="" >
                                  </div>
                              </div>

                          </div>
                      </div>
                  </div>
                  <div class="bottomText">没有更多数据了</div>
                  <van-dialog v-model:show="show" title="消息提示框" show-cancel-button confirmButtonColor="red"
                              @confirm="onConfirm(goods)">
                      <div class="prompt">  是否兑换该商品</div>
                  </van-dialog>
              </van-tab>
              <van-tab title="冀商好物" name="b" >
                  <div class="tabList" v-for="item_2 in shoplist_2" :key="item_2.goodsId">
                      <div class="imgBox">
                          <img :src="item_2.goodsImage" alt="">
                      </div>
                      <div class="contentBox">
                          <div class="listTitle">{{item_2.goodsName}}</div>
                          <div class="listPrice">价值{{item_2.goodsValue}}元</div>
                          <div class="listPoints">
                              <div class="listDetail">
                                  <span>
                                      <span class="redPrice">{{item_2.goodsIntegral}}</span>
                                      积分
                                  </span>
                                  <span class="redText">仅剩{{item_2.goodsNumber}}件</span>
                                  <div class="lineBox">
                                      <div class="redline">
                                      </div>
                                  </div>
                              </div>
                              <div>
                                  <div class="nopointBox" v-if="item_2.goodsMargin!=0">
                                      <van-cell   @click="showPopup(item_2)" >
                                          <img src="./images/goshop.png" alt="" >
                                      </van-cell>

                                  </div>
                                  <div class="nopointBox" v-else>
                                      <img src="./images/goshopno.png" alt="" >
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="bottomText">没有更多数据了</div>
                  <van-dialog v-model:show="show" title="消息提示框" show-cancel-button confirmButtonColor="red"
                              @confirm="onConfirm(goods)">
                      <div class="prompt">  是否兑换该商品</div>
                  </van-dialog>
              </van-tab>
              <van-tab title="冀商活动" name="c">
                  <div class="activity" v-if="shopLists_0==''">
                      暂无商品
                  </div>
                  <div v-else>
                      <div class="tabList" v-for="item_0 in shopLists_0" :key="item_0.goodsId">
                          <div class="imgBox">
                              <img :src="item_0.goodsImage" alt="">
                          </div>
                          <div class="contentBox">
                              <div class="listTitle">{{item_0.goodsName}}</div>
                              <div class="listPrice">价值{{item_0.goodsValue}}元</div>
                              <div class="listPoints">
                                  <div class="listDetail">
                                  <span>
                                      <span class="redPrice">{{item_0.goodsIntegral}}</span>
                                      积分
                                  </span>
                                      <span class="redText">仅剩{{item_0.goodsNumber}}件</span>
                                      <div class="lineBox">
                                          <div class="redline">
                                          </div>
                                      </div>
                                  </div>
                                  <div>
                                      <div class="nopointBox" v-if="item_0.goodsMargin!=0">
                                          <van-cell   @click="showPopup(item_0)" >
                                              <img src="./images/goshop.png" alt="" >
                                          </van-cell>
                                      </div>
                                      <div class="nopointBox" v-else>
                                          <img src="./images/goshopno.png" alt="" >
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="bottomText">没有更多数据了</div>
                  </div>
                  <van-dialog v-model:show="show" title="消息提示框" show-cancel-button confirmButtonColor="red"
                              @confirm="onConfirm(goods)">
                      <div class="prompt">  是否兑换该商品</div>
                  </van-dialog>
              </van-tab>
          </van-tabs>
      </div>

  </div>

</template>

<style scoped >
:deep(.van-overlay) {
    background-color: rgba(76, 76, 76,0.15);
}
.topsearchBox {
    background-color: #edaaa6;
    overflow: hidden;

    .topsearch {
        display: flex;
        margin: 10px;
        background-color: #fff;
        border-radius: 50px;
        .searchImg {
            width: 10%;
            margin: 5px 0 0px 5px;
        }
        .inputBox {
            width: 70%;
            border: none;
        }
        .btnBox {
            width: 20%;
            background-color: #c81127;
            border: none;
            border-radius: 50px;
            margin: 5px;
            color: #fff;
        }
    }
}

.prompt {
    text-align: center;
}
.image-container {
    position: relative;
    display: inline-block;
    height: 80px;
    width: 100%;
     img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    bottomimg {
        z-index: 10; /* 位于底层 */
    }

    topimg {
        z-index: 20; /* 位于顶层 */
    }
}
.topPoints {
    overflow: hidden;
    background-image: url("./images/pointsTop_bc.jpg");
    background-repeat: no-repeat;
    .search {
        height: 45px;
    }
    .pointBox {
        width: 345px;
        margin: 20px auto;
        height: 157.5px;
        background-repeat: no-repeat;
        background-image: url("./images/point_bc.png");
        .pointBoxContent {
            margin: 22px 23px 13px 22px;
            .points {
                font-size: 35px;
            }
            .pointsText {
                margin: -10px 0 32px 10px;
                font-size: 13px;
                color: #999999;
            }
            .exchangeText {
                font-size: 13px;
                color: #999999;
            }
        }

    }
}
.bottomTab {
    min-height: 347px;
    background-color: #F8F8F8;
    .tabBox {
        margin: 0 15px 20px;
        .tabList {
            overflow: hidden;
            display: flex;
            margin-top: 15px;
            width: 100%;
            height: 104px;
            background-color: #fff;
            border-radius: 20px;
            .imgBox {
                margin: 12px;
                width: 24%;
                height: 80px;
                >img {
                    width: 100%;
                    height: 100%;
                }
            }
            .contentBox {
                margin: 12px 12px 12px 0;
                width: 70%;
                color: #181818;
                display: flex;
                flex-direction: column;
                .listTitle {
                    font-size: 14px;
                }
                .listPrice {
                    color: #999999;
                    font-size: 12px;
                }
                .listPoints {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    .listDetail {
                        margin-top: 5px;
                        font-size: 12px;
                        .redPrice {
                            font-size: 14px;
                            color: #c81127;
                        }
                    }
                    .lineBox {
                        border-radius: 5px;
                        margin-top: 5px;
                        width: 90px;
                        height: 5px;
                        background-color:#EEEEEE ;
                        .redline {
                            width: 80%;
                            height: 5px;
                            background-color: #c81127;
                            border-radius: 5px;
                        }
                    }

                    .redText {
                        color: #c81127;
                        margin-left: 5px;
                    }
                }
            }
        }
        .bottomText {
            margin:20px auto 20px;
            text-align: center;
        }
    }
    .activity {
        margin-top: 20px;
        text-align: center;
    }
}
</style>